@charset "utf-8";
body{
    background: #2f3239;
}
*{
    margin:0;
    padding:0;
    list-style: none;
}
.box{
    width:960px;
    overflow: hidden;
    margin:100px auto 0;
    ul{
        width:100%;
        height:100%;   
        li{
            float:left;
            width:450px;
            height:350px;
            margin:0 30px 60px 0;
            position:relative;
            overflow: hidden;
            img{
                display:block;
                width:450px;
                height:350px;
                transition:all 1s;
            }
            h3{
                position:absolute;
                left:50px;
                bottom:100px;
                color:#fff;
                font-family: Arial, Helvetica, sans-serif;
            }
            p{
                position:absolute;
                left:50px;
                bottom:40px;
                color:#fff;
                font-family: Arial, Helvetica, sans-serif;
                display: none;
            }
            
            &:nth-of-type(2){
                 img{
                    transform:scale(1.2);
                 }               
            }
             &:nth-of-type(3){
                 img{
                    transform:scale(1.2);
                 }               
            }
            &:nth-of-type(4){
                .squre{
                    width:300px;
                    height:200px;
                    margin:70px auto;
                    border:2px solid #fff;
                    position: absolute;
                    top:10px;
                    left:72px;
                    z-index:1;
                    transform: scale(0);
                } 
                @keyframes myli{
                    0%{
                        transform: scale(0);
                    }
                    100%{
                        transform: scale(1);
                    }
                }
            }
             &:nth-of-type(5){
                 opacity: 0.7;
                 p{
                    left:80px;
                    bottom:100px;
                 }
                 .left{
                     width:2px;
                     background: #fff;
                     position: absolute;
                     left:50px;
                     top:30px;
                 }
                 .right{
                     @extend .left;
                     left:390px;
                 }
                 .top{
                     width:0;
                     height:2px;
                    position: absolute;
                    top:60px;
                    left:20px;
                    background: #fff;
                 }
                 .bottom{
                     @extend .top;
                     top:280px;
                     left:20px;
                 }
                 @keyframes myleft{
                     form{height:0;}
                     to{
                         height:280px;
                     }
                 }
                  @keyframes mytop{
                     form{width:0;}
                     to{
                         width:400px;
                     }
                 }
             }
             &:nth-of-type(6){
                h3{
                    top:40px;
                    left:40px;
                }
                p{
                    // display: block;
                    color:#000;
                    bottom:230px;
                    z-index: 2;

                }
                .tangle{
                    width:380px;
                    height:5px;
                    background: #fff;
                    position: absolute;
                    top:80px;
                    left:40px;
                }
                @keyframes mytangle{
                    form{height:5px;}
                    to{
                        height:70px;
                    }
                }
             }
             &:nth-of-type(7){
                 img{
                     transform: scale(1.2);
                 }
                .squre1{
                    width:150px;
                    height:120px;
                    border:2px solid #fff;
                    position:absolute;
                    top:30px;
                    left:30px;
                    transition:all 0.5s;
                    p{
                        color:#fff;
                        display: block;
                        font-size:14px;
                    }
                }
                .squre2{
                    @extend .squre1;
                }
             }
             &:nth-of-type(8){
                 img{
                     transform: scale(1.2);
                 }
                 .line1{
                     width:2px;
                     height:200px;
                     transform: rotate3d(0,0,1,45deg);
                     position: absolute;
                     top:-27px;
                     left:72px;
                     background: #fff;
                     opacity: 0;
                 }
                 .line2{
                     width:2px;
                     height:200px;
                     transform: rotate3d(0,0,1,45deg);
                     position: absolute;
                    bottom:-27px;
                     right:72px;
                     background: #fff;
                     opacity: 0;
                 }
                 @keyframes myopacity{
                     0%{
                         opacity: 0;
                     }
                     50%{
                         opacity: 0.5;
                     }
                     100%{
                         opacity: 1;
                     }
                 }
             }
             
            // 鼠标移入
             &:nth-of-type(1):hover{
                 img{
                    transform:scale(1.2);
                    opacity:0.7;
                 }
                 h3{
                     transform: translateY(10px);
                 }
                 p{
                     display: block;
                 }             
            }
            &:nth-of-type(2):hover{
                 img{
                    transform:scale(1.2) translateX(30px);
                    opacity:0.7;
                 }
                  h3{
                     transform: translateY(10px);
                 }
                 p{
                     display: block;
                 }                      
            }
             &:nth-of-type(3):hover{
                 img{
                    transform:scale(1.2) translateX(-30px);
                    opacity:0.7;
                 }
                  h3{
                     transform: translateY(10px);
                 }
                 p{
                     display: block;
                 }                      
            }
            &:nth-of-type(4):hover{
                 img{
                    opacity:0.7;
                 }
                  h3{
                     display: none;
                 }
                 .squre{
                    animation:myli 1s forwards;
                     p{
                         display: block;
                     }
                 }              
            }
             &:nth-of-type(5):hover{
                h3{
                    display: none;
                }
                .left{
                    animation: myleft 2s forwards;
                }
                .top{
                    animation: mytop 2s forwards;
                }
                p{
                    display: block;
                }
             }
             &:nth-of-type(6):hover{
                  img{
                     transform: scale(1.2);
                  }
                 opacity: 0.7;
                 .tangle{
                    animation: mytangle 1s forwards;
                 }
                p{
                    display: block;
                }
             }
            &:nth-of-type(7):hover{
                  opacity: 0.7;
                  img{
                    transform: scale(1.2) translateY(-30px);
                    }
                  .squre2{
                      transform: translate(160px,130px);
                  }
              }
             &:nth-of-type(8):hover{
                opacity:0.7;
                img{
                    transform: scale(1.2) translateY(30px);
                }
                .line1{
                    animation:myopacity 2s;
                }
                .line2{
                    animation:myopacity 2s;
                }
             }
        
        }
        
    }
}